<template>
    <div class="setting-list">
        <div class="title-wrapper">
            <!-- 数据 -->
            <span class="title">聚焦点</span>
            <!-- 错误提示 -->
            <span v-show="warning" class="warning"><i class="iconfont icon-cry"></i>{{warnMsg}}</span>
        </div>
        <ul class="setting-input">
            <li class="input-item">
                <span class="title">x：</span>
                <div class="input-text">
                    <input type="text" class="text" v-model="x">
                </div>
            </li>
            <li class="input-item">
                <span class="title">y：</span>
                <div class="input-text">
                    <input type="text" class="text" v-model="y">
                </div>
            </li>
        </ul>
        <span class="btn btn-primary" @click="settingZoom">设置</span>
    </div>
</template>
<script>
    import { mapState } from 'vuex'

    export default {
        data(){
            return {
                x: '',
                y: '',
                warning: false,
                warnMsg: '坐标格式错误'
            }
        },
        computed: mapState({
            mapObj: state => state.mapObj,
            zoom: state => state.zoom
        }),
        mounted(){
            //初始化数据
            this.x = this.zoom.x;
            this.y = this.zoom.y;
        },
        methods: {
            //设置聚焦点
            settingZoom(){
                if(!(this.isCorrectNumber(this.x) && this.isCorrectNumber(this.y))){
                    this.warnMsg = '存在非坐标字符';
                    this.warning = true;
                    return;
                }
                let point = new BMap.Point(this.x, this.y);
                this.mapObj.centerAndZoom(point, this.zoom.in);
                this.$store.dispatch('setZoomData', {x: this.x, y: this.y});
            },
            isCorrectNumber(num){
                //不能有字母
                let reg = new RegExp('[^0-9\.]+', 'g');
                if(reg.test(num)){
                    return false;
                }
                return true;
            }
        }
    }
</script>
<style lang="scss" scope>
    .setting-list {
        padding: 16px;
        border-bottom: 1px solid #ddd;
        overflow: hidden;
        .setting-input {
            margin: 16px 0;
            padding: 0;
            list-style: none;
            .input-item {
                .title {
                    float: left;
                    font-size: 14px;
                    line-height: 30px;
                    color: #666;
                }
                .input-text {
                    padding-left: 30px;
                    .text {
                        box-sizing: border-box;
                        width: 100%;
                        height: 30px;
                        border: 1px solid #ddd;
                        border-radius: 5px;
                    }
                }
                & + .input-item {
                    margin-top: 15px;
                }
            }
        }
        .btn {
            float: right;
        }
        .title-wrapper {
            height: 20px;
        }
        .title {
            font-size: 14px;
            line-height: 20px;
            color: #999;
        }
        .warning {
            margin-left: 10px;
            font-size: 12px;
            line-height: 20px;
            color: #dc0000;
            .iconfont {
                margin-right: 5px;
                font-size: 12px;
            }
        }
    }
</style>


